<template>
  <div class="appoint_ment_count">
    <div
      v-for="(item, index) in items"
      :key="index"
      class="appoint_ment_count_item"
    >
      <div class="text">
        <span>{{ item.text }}</span>
      </div>
      <!-- 判断是否为步进器 -->
      <div v-if="item.isStepper" class="stepper_container">
        <van-stepper
          v-model="localQuantity"
          theme="round"
          button-size="22"
          disable-input
        />
      </div>

      <div
        v-else
        :class="['price', { pricecolor: item.isSpecial ? 'pricecolor' : '' }]"
        class="price"
      >
        {{ item.price }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, defineEmits } from "vue";

const props = defineProps({
  items: {
    type: Array,
    required: true,
    validator: (value) => {
      return value.every(
        (item) => "text" in item && ("price" in item || "isStepper" in item)
      );
    },
  },
  initialQuantity: {
    type: Number,
    default: 1,
  },
});

const emit = defineEmits(["quantity-change"]);

// 内部管理的数量状态
const localQuantity = ref(props.initialQuantity);

// 监听变化并通知父组件
watch(localQuantity, (newVal) => {
  emit("quantity-change", newVal);
});
</script>

<style lang="less" scoped>
// 数量部分样式
.appoint_ment_count {
  background-color: #fff;
  border-radius: 10px;
  padding: 0 10px;
  margin-top: 10px;

  .appoint_ment_count_item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 45px;
    border-bottom: 1px solid #eee;
    font-weight: bold;
    color: #626467;

    &:last-child {
      border-bottom: none;
    }

    .van-stepper.van-stepper--round {
      --van-stepper-background: #1bb793;

      .van-stepper__minus {
        background-color: #e6e7ee;
        border: none;

        &::before {
          background-color: #ccc;
        }
      }
      .van-haptics-feedback {
        background: var(--van-stepper-background);

        &::before {
          background-color: #fff;
        }
      }
    }
  }
}
</style>